<template>
  <div style="height: 100%" class="position_title">
    <div id="datatask" style="height: 100%"></div>
    <div class="content-title">
      <span class="all-text">全部</span>
      <span class="proportion-text">100%</span>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'sjdrrwflEcharts',
  props:{
      pieData:{
          type:Array,
          default:[]
      }
  },
  data(){return {}},
  mounted() {
   this.$nextTick(()=>{
          this.drawLine(this.pieData)
    })
  },
  methods: {
    drawLine(data) {
      var chartDom = document.getElementById('datatask')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}:{c} ({d}%)',
        },
        // title: {
        //   text: '全部\n100%',
        //   textStyle: {
        //     color: '#3154a4',
        //     fontSize: 20,
        //   },
        //   top: '41%',
        //   left: '49%',
        //   textAlign: 'center',
        // },
        grid: {
          top: 30,
          bottom: 10,
          left: 30,
          right: 30,
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            data,
            label: {
              formatter: '{b} {d}%',
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }

      option && myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.position_title {
  position: relative;
  .content-title {
    position: absolute;
    top: 40%;
    left: 44.5%;
    span{
      text-align: center;
      display: block;
      font-weight:700;
    }
    .all-text{
      font-size: 14px;
    }
    .proportion-text{
      font-size: 20px;
      color:#2E4CBA;
    }
  }
}
</style>